<template>
  <view class="page-container">
    <!-- 新增卡券区域 -->
    <view class="header-section">
        <view class="header-title">新增优惠券</view>
        <button 
         class="create-btn"
        @tap="navigateToCreate"
        >
            + 新增
        </button>
    </view>
    
	 <!-- 状态切换 -->
	<uni-segmented-control 
	    :current="activeTab" 
	    :values="tabs" 
	    @clickItem="handleTabChange"
	    style-type="button"
	    active-color="#1890ff"
	    />

    <!-- 卡券列表 -->
    <scroll-view scroll-y class="coupon-list">
      <view 
        v-for="(item, index) in filteredCoupons"
        :key="item.id"
        class="coupon-card"
        :class="[item.status, { 'expiring': isExpiring(item) }]"
      >
        <view class="card-left">
          <text class="currency">¥</text>
          <text class="amount">{{ item.amount }}</text>
          <text class="condition">满{{ item.condition }}可用</text>
        </view>
        
        <view class="divider"></view>

        <view class="card-right">
          <text class="title">{{ item.title }}</text>
          <view class="valid-date">
            <uni-icons type="calendar" size="14" color="rgba(255,255,255,0.8)" />
            <text>{{ formatDate(item.start) }} - {{ formatDate(item.end) }}</text>
          </view>
          <text class="limit">每人限领{{ item.limit }}张</text>
        </view>
      </view>
    </scroll-view>

    <!-- 空状态 -->
    <view v-if="filteredCoupons.length === 0" class="empty-tip">
      <image src="/static/empty-coupon.png" class="empty-image" />
      <text class="empty-text">暂无{{ tabs[activeTab] }}的优惠券</text>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

// 状态管理
const activeTab = ref(0)
const tabs = ['进行中', '已结束']
const newCoupon = reactive({
  condition: '',
  amount: 0
})
const coupons = ref([]) // 初始为空数组

const loadCoupons = async () => {
  // 模拟接口请求
  setTimeout(() => {
    coupons.value = [
      {
        id: 1,
        title: '示例优惠券',
        condition: 100,
        amount: 20,
        start: '2024-03-01',
        end: '2024-03-31',
        limit: 1,
        status: 'active'
      }
    ]
  }, 500)
}



// 计算属性
const filteredCoupons = computed(() => {
  return coupons.value.filter(item => 
    activeTab.value === 0 ? 
    item.status === 'active' : 
    item.status === 'expired'
  )
})

// 工具函数
const formatDate = (dateStr) => {
  return dateStr.split('-').slice(1).join('.')
}

const isExpiring = (item) => {
  const endDate = new Date(item.end)
  const now = new Date()
  return endDate - now < 3 * 86400000 && item.status === 'active'
}

// 事件处理
const handleTabChange = (e) => {
  activeTab.value = e.currentIndex
}

const handleCreate = () => {
  if (!newCoupon.condition) return
  
  // 解析输入内容
  const matches = newCoupon.condition.match(/满(\d+)减(\d+)/)
  if (!matches || matches.length < 3) {
    uni.showToast({ title: '格式错误，示例：满100减20', icon: 'none' })
    return
  }

  const newItem = {
    id: Date.now(),
    title: '自定义优惠券',
    condition: parseInt(matches[1]),
    amount: parseInt(matches[2]),
    start: new Date().toISOString().split('T')[0],
    end: new Date(Date.now() + 7 * 86400000).toISOString().split('T')[0],
    limit: 1,
    status: 'active'
  }

  coupons.value.unshift(newItem)
  newCoupon.condition = ''
  uni.showToast({ title: '添加成功' })
}

onMounted(()=>{
	loadCoupons()
})

// 导航到创建页面
const navigateToCreate = () => {
  uni.navigateTo({
    url: '/pages/set_cards/set_cards'
  })
}

</script>

<style lang="scss" scoped>
.page-container {
  padding: 24rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.create-section {
  margin-bottom: 32rpx;
  
  .create-btn {
    margin-left: 20rpx;
    padding: 0 32rpx;
    height: 72rpx;
    line-height: 72rpx;
    background: #1890ff;
    color: #fff;
    border-radius: 40rpx;
    font-size: 28rpx;
    &::after { border: none; }
  }
}

.coupon-list {
  height: calc(100vh - 280rpx);
  padding: 24rpx 0;
}

.coupon-card {
  display: flex;
  height: 200rpx;
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #1890ff, #096dd9);
  color: #fff;
  
  &.expired {
    opacity: 0.6;
    background: linear-gradient(135deg, #999, #666);
  }

  .card-left {
    flex: 0 0 260rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24rpx;
    
    .currency {
      font-size: 36rpx;
      margin-right: 8rpx;
    }
    
    .amount {
      font-size: 64rpx;
      font-weight: 800;
      text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
    }
    
    .condition {
      font-size: 24rpx;
      opacity: 0.9;
    }
  }

  .divider {
    width: 1rpx;
    background: rgba(255,255,255,0.3);
    margin: 32rpx 0;
  }

  .card-right {
    flex: 1;
    padding: 32rpx 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .title {
      font-size: 32rpx;
      font-weight: 500;
    }
    
    .valid-date {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      opacity: 0.9;
      
      .uni-icons {
        margin-right: 8rpx;
      }
    }
    
    .limit {
      font-size: 24rpx;
      opacity: 0.8;
    }
  }
}

.empty-tip {
  text-align: center;
  padding-top: 120rpx;
  
  .empty-image {
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 32rpx;
  }
  
  .empty-text {
    color: #999;
    font-size: 28rpx;
  }
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  background: #fff;
  margin-bottom: 24rpx;

  .header-title {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }

  .create-btn {
    padding: 0 32rpx;
    height: 64rpx;
    line-height: 64rpx;
    background: #1890ff;
    color: #fff;
    border-radius: 32rpx;
    font-size: 28rpx;
    &::after { border: none; }
  }
}
</style>
